import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';
import AuthorSelect from 'components/widgets/AuthorSelect';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'BannerEdit';
    store = null;

    constructor(props, context) {

        super(props, context);
        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});
        this.bannerTypeList = [{value: 1, label: 'PC端Web画展'}, {value: 2, label: '移动端Web画展'},
            {value: 3, label: 'PC端Web用户'}, {value: 4, label: '移动端Web用户'}];

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    render() {
        let bannerInfo = this.store.detail;
        return (
            <div className="orin-s-banneredit-root">
                <div className={this.store.visible ? 'banner-dialog show' : 'banner-dialog hide'}>
                    <div className="banneredit-wrap" onClick={(e) => this.store.closeDialog(e)}>
                        <div className="banneredit-box" onClick={(e) => e.stopPropagation()}>
                            <div className="banneredit-title">
                                <p>{this.store.display === 'edit' ? '修改banner' : '添加banner'}</p>
                                <span onClick={(e) => this.store.closeDialog(e)}><ReIcon icon="window_closes"/></span>
                            </div>
                            <div className="banneredit-contain">
                                {
                                    !bannerInfo.url ?
                                        <div className="banner-image">
                                            <p className="change-btn" onClick={() => this.refs.avatarFile.click()}>
                                                <span>{'添加banner图'}</span>
                                                <input type='file' ref="avatarFile"
                                                       onChange={(e) => this.store.filesOnChange(e, this.refs.avatarFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </p>
                                        </div>
                                        :
                                        <div className="banner-image">
                                            <img
                                                src={this.store.isUpdateCover ? bannerInfo.url : $$.utils.pictureThumb(bannerInfo.url, true)}
                                                size={300}
                                                className="image"/>
                                            <p className="change-btn" onClick={() => this.refs.avatarFile.click()}>
                                                <span>{'更换banner图'}</span>
                                                <input type='file' ref="avatarFile"
                                                       onChange={(e) => this.store.filesOnChange(e, this.refs.avatarFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </p>
                                        </div>
                                }
                                <div className="banner-size">{bannerInfo.type === 1 || bannerInfo.type === 3 ? '建议尺寸:1920 * 300' : '建议尺寸:750 * 300'}</div>
                                <div className="detail-form">
                                    <div className="detail-item-wrapper">
                                        <span className="label">{bannerInfo.type === 1 || bannerInfo.type === 2 ?'画展名称' :'用户名称'}</span>
                                                {/*<ReTextField*/}
                                                    {/*label=""*/}
                                                    {/*isLabel={false}*/}
                                                    {/*type="text"*/}
                                                    {/*className="name-input"*/}
                                                    {/*// tipLeft={true}*/}
                                                    {/*CN={true}*/}
                                                    {/*maxLength="20"*/}
                                                    {/*notfullWidth={false}*/}
                                                    {/*closeIcon={true}*/}
                                                    {/*onChange={(e, v) => this.store.bannerNameInput(v)}*/}
                                                    {/*// onBlur={(e, v) => this.store.bannerNameBlur()}*/}
                                                    {/*// errorText={this.store.nickNameError}*/}
                                                    {/*value={bannerInfo.name}*/}
                                                    {/*placeholder={$$.LN.NICK_NAME_HINT_TEXT}/>*/}
                                                {/*:*/}
                                                <AuthorSelect
                                                    className="assign-user-wrapper"
                                                    iValue={bannerInfo.name}
                                                    onChange={(v, id) => this.store.assignUserOnChange(v, id)}
                                                    type={bannerInfo.type}
                                                    typeHasChange = {this.store.typeHasChange}
                                                    placeHolder={(bannerInfo.type === 1 || bannerInfo.type === 2) ? '请选择画展':'请选择用户'}/>
                                    </div>
                                    <div className="detail-item-wrapper">
                                        <span className="label">{'类型'}</span>
                                        <ReSelectField
                                            type=""
                                            className="identity-input"
                                            isOpen={false}
                                            list={this.bannerTypeList}
                                            value={this.store.detail.type}
                                            placeholder={$$.utils.changeBannerType2Name(bannerInfo.type)}
                                            onChange={(v) => this.store.typeChange(v)}/>
                                    </div>
                                    {/*<div className="detail-item-wrapper">*/}
                                    {/*<span className="label">{this.store.detail.type ===1 || this.store.detail.type ===2 ?  '画展id':'用户id'}</span>*/}
                                    {/*<ReTextField*/}
                                    {/*label=""*/}
                                    {/*isLabel={false}*/}
                                    {/*type="number"*/}
                                    {/*className="region-input"*/}
                                    {/*// tipLeft={true}*/}
                                    {/*CN={true}*/}
                                    {/*maxLength="11"*/}
                                    {/*notfullWidth={false}*/}
                                    {/*onChange={(e, v) => this.store.idChange(v)}*/}
                                    {/*value={bannerInfo.showId}*/}
                                    {/*placeholder={''}/>*/}
                                    {/*</div>*/}
                                    {
                                        this.store.display === 'edit' &&
                                        <div className="detail-item-wrapper">
                                            <span className="label">排序</span>
                                            <ReTextField
                                                label=""
                                                isLabel={false}
                                                type="number"
                                                className="region-input"
                                                // tipLeft={true}
                                                CN={true}
                                                maxLength="20"
                                                notfullWidth={false}
                                                onChange={(e, v) => this.store.sortChange(v)}
                                                value={bannerInfo.sort}
                                                placeholder={''}/>
                                        </div>
                                    }
                                </div>
                            </div>
                            <div className="confirm-footer">
                                <p className="title" onClick={() => this.store.confirmInfo()}>确定</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}